<template name="Moretests">
	<view>
		<view class="about">
			<view class="about_title">热门测评</view>
			<view class="about_dec">更多好玩有趣的测试 - 本产品仅供娱乐</view>
			<view class="testlist" v-for="(item,index) in testlist" :key="index" @click="toTest(item._id)">
				<image :src="item.smimg"></image>
				<view class="testint">
					<view class="test_title">{{item.title}}</view>
					<view class="test_dec">{{item.describe}}</view>
					<view class="test_btn">
						<view class="views"><text style="color: #ff0000;">{{item.times}}</text>人测试过</view>
						<view class="gotest">立即测试</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:["testlist"],
		methods: {
			toTest(e){
				this.$emit("toTest",{id:e})
			}
		}
	}
</script>

<style lang="less">
	.about {
		margin: 0 25rpx;
		background-color: #ffffff;
		padding: 20rpx;
		width: 660rpx;
		border-radius: 30rpx;
	
		.about_title {
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
		}
	
		.about_dec {
			text-align: center;
			margin-top: 10rpx;
			font-size: 25rpx;
			color: #535353;
		}
	
		.testlist {
			display: flex;
			margin: 40rpx 0;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #cacaca;
	
			image {
				width: 170rpx;
				height: 170rpx;
				border-radius: 20rpx;
			}
	
			.testint {
				width: 450rpx;
				margin: 0 0 0 30rpx;
	
				.test_title {
					font-size: 35rpx;
					font-weight: bold;
	
				}
	
				.test_dec {
					margin-top: 15rpx;
					font-size: 25rpx;
					line-height: 35rpx;
					color: #6b6b6b;
				}
	
				.test_btn {
					display: flex;
					margin-top: 10rpx;
	
					.views {
						font-size: 25rpx;
						line-height: 50rpx;
						margin-right: auto;
					}
	
					.gotest {
						font-size: 25rpx;
						border: 1rpx solid #000000;
						border-radius: 30rpx;
						padding: 5rpx;
						width: 150rpx;
						text-align: center;
	
					}
				}
	
			}
		}
	}

</style>
